Next.js入門 4 APIルート

ダイナミックルーティングやSSGなど、Next.jsがReact.jsコンポーネントにとって強力な機能を持っていることは概ね理解できたと思います。続いて、Next.jsによってサーバーサイドAPIを構築する方法を理解していきましょう

api/helloにアクセスしてみましょう

Next.jsの重要なルール：pages/api/以下にあるファイルはAPIになる

以降はVSCodeでの作業です

このファイルには最初から中身があります

code:pages/api/hello.ts

import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {

name: string

}

export default (req: NextApiRequest, res: NextApiResponse<Data>) => {

res.status(200).json({ name: 'John Doe' })

}

これがどのように動くのか試してみましょう

以降はターミナル内での作業です

前回のステップで本番用サーバーを起動したままだったら停止します

Next.jsの開発用サーバーを起動します

code:bash

npm run dev

以降はブラウザでの作業です

https://gyazo.com/c3a6b3098d9ca5261a58b1ce33482777

こういうページが表示されるはずです！！

Next.jsの重要な機能であるSSGを活用するためには、GET系のAPIを実装する意味はありません

getStaticProps内にサーバーサイドのコードを直接記述することができます

getStaticProps内からAPIをfetchする意味はありません

ということで、APIルートを活用するためにはデータベースの準備が必要です

Next.jsの公式ドキュメント（日本語訳）

API ルート

API ルートは Next.js でAPIを構築する簡単な方法を提供しています。

pages/apiフォルダ内にあるすべてのファイルは /api/* にマッピングされ、pageの代わりに API エンドポイントとして扱われます。

データ取得

getStaticPropsはサーバー側でのみ実行されることに注意してください。クライアント側では決して実行されません。ブラウザ用の JS バンドルにも含まれません。つまり、直接データベースクエリのようなコードを書いてもブラウザに送信されることはないということです。API ルートを getStaticProps から取得するのではなく、代わりに getStaticProps で直接サーバー側のコードを書くことができます。